<template>
  <div class="shoppingGaps">
    <div
      class="shoppingGapsitem"
      v-for="(shoppingGaps,gaps) in  shoppingGaps"
      :key="gaps"
      @click="gospgentering"
    >
      <img :src="shoppingGaps.images" />
      <div class="shoppingGapsRight">
        <p class="title">{{shoppingGaps.title}}</p>
        <p class="topPrice">最高价{{shoppingGaps.topPrice}}</p>
        <p class="buttomPrice">最低价{{shoppingGaps.buttomPrice}}</p>
        <div id="main" style="width: 100px; height: 50px"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "shoppingGaps",
  props: {
    shoppingGaps: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      charts: "",
      opinionData: [
        "14",
        "19.1",
        "19.2",
        "19.3",
        "18",
        "18.5",
        "19.5",
        "16",
        "20",
        "18.7",
        "18.6",
        "18.8",
        "20.3",
        "21.1"
      ]
    };
  },
  methods: {
    // 前往商品录入
    gospgentering() {
      this.$router.push({ path: "/spgentering" });
      console.log("gogo");
    },
    // 图表渲染
    drawLine(main) {
      this.charts = this.$echarts.init(document.getElementById("main"));
      color: this.color,
        this.charts.setOption({
          title: {
            show: true
          },
          grid: {
            show: false,
            backgroundColor: "transparent"
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            show: false
          },
          yAxis: {
            type: "value",
            show: false
          },
          series: [
            {
              type: "line",
              data: this.opinionData,
              areaStyle: {
                normal: {
                  color: {
                    type: "linear",
                    colorStops: [
                      {
                        offset: 0,
                        color: "#e6f9ef"
                      },
                      {
                        offset: 1,
                        color: "#4fd88b"
                      }
                    ]
                  }
                }
              },
              itemStyle: {
                normal: {
                  color: "#00C657",
                  lineStyle: {
                    color: "#00C657"
                  }
                }
              }
            }
          ]
        });
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.drawLine("main");
    });
  }
};
</script>

<style scoped>
.shoppingGaps {
  background-color: rgba(247, 249, 252, 1);
  margin-top: 20px;
}
.shoppingGapsitem {
  display: flex;
  margin: 11px;
  background-color: #fff;
}
.shoppingGapsitem img {
  width: 112px;
  height: 112px;
  vertical-align: middle;
}
.shoppingGapsRight {
  margin-left: 12px;
}
.title {
  font-size: 14px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.topPrice {
  font-size: 10px;
  font-weight: 500;
  color: rgba(0, 198, 87, 1);
}
.buttomPrice {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 98, 0, 1);
}
#main {
  vertical-align: middle;
}
</style>
